<template>
    <div>
        <el-row :gutter="30">
            <el-col :span="24">
                <el-button type="info" size="mini" icon="el-icon-refresh" @click="post_search()">刷新</el-button>
                <el-button type="success" size="mini" icon="el-icon-plus" @click="addPopup()">添加分类</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="del()">删除分类</el-button>
            </el-col>
        </el-row>

        <el-row :gutter="24">
            <el-col :span="24">
                <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column sortable prop="pro_class_id" label="分类id"></el-table-column>
                    <el-table-column prop="pro_class_name" label="分类名称"></el-table-column>
                    <el-table-column prop="pro_class_nike_name" label="分类昵称"></el-table-column>
                    <el-table-column prop="pro_class_sign" label="标志"></el-table-column>
                    <el-table-column prop="pro_class_image" label="图片"></el-table-column>
                    <el-table-column prop="pro_class_state" label="状态"></el-table-column>
                    <el-table-column prop="pro_class_parent_level" label="父级"></el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">   
                            <el-button @click="editPopup(scope.row)" type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
                            <el-button @click="del(scope.row)" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <el-dialog :title="this.popupTitle" :close-on-click-modal="false" :visible.sync="dialogFormVisible" @close="resetForm('form')">
            <el-form :model="form" ref="form" :rules="rules">
                <el-form-item :label-position="labelPosition" label="分类名称" prop="pro_class_name" :label-width="formLabelWidth">
                    <el-input v-model="form.pro_class_name" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item :label-position="labelPosition" label="分类昵称" prop="pro_class_nike_name" :label-width="formLabelWidth">
                    <el-input v-model="form.pro_class_nike_name" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item :label-position="labelPosition" label="标志" prop="pro_class_sign" :label-width="formLabelWidth">
                    <el-input v-model="form.pro_class_sign" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item :label-position="labelPosition" label="图片" prop="password" :label-width="formLabelWidth">
                    <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item :label-position="labelPosition" label="父级" prop="pro_class_parent_level" :label-width="formLabelWidth">
                    <el-input v-model="form.pro_class_parent_level"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('form')">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import validator, { validatePhone, isPassword, validatePhoneTwo } from '../../assets/js/validator'
    import { Loading } from 'element-ui'

    export default {
        data () {
            return{
                data:[],
                form:{
                    className:'',
                    classNickname:'',
                    classSign:'',
                    classImg:'',
                    parentLevel:'',
                    classState:'',
                },
                rules:{
                    
                },
                popupTitle: '',
                formLabelWidth: '120px',
                dialogFormVisible: false,
                labelPosition: 'right',
                imageUrl: '',
                dbName: 'class',
                action: 'search'
            }
        },
        components:{

        },
        mounted() {
            this.post_search()
            Loading.service({ fullscreen: true ,spinner: 'el-icon-loading',text: 'Loading',lock: true});
        },
        methods:{
            // 查询
            post_search(){
                this.action = 'search';
                this.$post("user.php",{
                    action: this.action,
                    dbName : this.dbName,
                }).then((result) => {
                    console.log(result);
                    this.data = JSON.parse(JSON.stringify(result));
                    Loading.service({ fullscreen: true }).close();
                }).catch((err) => {
                    console.log(err);
                });
            },
            // 多选
            handleSelectionChange(val) {
                this.multipleSelection = val;
                // console.log(val);
            },
            // 修改弹窗
            editPopup(data){
                this.popupTitle = '修改分类';
                this.dialogFormVisible = true;
                this.form = JSON.parse(JSON.stringify(data));
            },
            // 新增弹窗
            addPopup(){
                this.popupTitle = '添加分类';
                this.dialogFormVisible = true;
                this.form = {};
            },
            // 删除弹窗
            del(data){
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.action = 'delete',
                    this.$post("user.php", {
                        action: this.action,
                        dbName: this.dbName,
                        data: this.multipleSelection
                    }).then((response)=> {
                        console.log(response);
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.post_search();
                    }).catch((error)=> {
                        console.log(error);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            // 提交表单
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    this.action = "insert";
                    if (valid) {
                        this.dialogFormVisible = false;
                        this.$post("user.php", {
                            action: this.action,
                            dbName: this.dbName,
                            data: JSON.parse(JSON.stringify(this.form))
                        }).then((response)=> {
                            console.log(response);
                            this.$message({
                                message: this.popupTitle+'成功',
                                type: 'success'
                            });
                            this.post_search();
                        }).catch((error)=> {
                            console.log(error);
                        });
                    } else {
                        console.log('提交不了');
                        return false;
                    }
                });
            },
            // 关闭弹窗
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.dialogFormVisible = false;
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg'||'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG,png 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }
</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon { 
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>